<!--
/**
* Author: gaohui
* Date: 2023-02-28 14:32
* Desc: index 功能分区首页
*/
-->

<template>
  <div class="link-btn-box">
    <title-line title="基础操作" />
    <btn-container :arr="baseOperatePart" />
    <title-line title="拓展知识" />
    <btn-container :arr="extendsPart" />
  </div>
</template>

<script name="index" lang="ts" setup>
import BtnContainer from "./components/BtnContainer.vue";

// 基础操作
const baseOperatePart = [
  {
    text: "组件生命周期",
    link: "/compLife",
  },
  {
    text: "赋值及值修改",
    link: "/refComp",
  },
  {
    text: "组件传值及获取组件下的值与方法",
    link: "/propsComp",
  },
  {
    text: "computed",
    link: "/computedComp",
  },
  {
    text: "watch",
    link: "/watchComp",
  },
  {
    text: "路由切换及传参取参",
    link: "/routerComp",
  },
  {
    text: "store操作",
    link: "/storeComp",
  },
  {
    text: "eventBus",
    link: "/eventComp",
  },
  {
    text: "keep-alive",
    link: "/keepAliveComp",
  },
  {
    text: "动态组件",
    link: "/dynamicComp",
  },
  {
    text: "动态图片",
    link: "/dynamicImgComp",
  },
  {
    text: "provide与inject",
    link: "/provideComp",
  },
  {
    text: "函数式组件",
    link: "/renderComp",
  },
];

// 拓展内容
const extendsPart = [
  {
    text: "切换主题颜色",
    link: "/changeThemeColor",
  },
  {
    text: "表格封装",
    link: "/testTable",
  },
  {
    text: "骨架屏基础使用方法",
    link: "/skeletonComp",
  },
  {
    text: "chatGPT调用",
    link: "/chatGTPDemo",
  },
  {
    text: "图表组件",
    link: "/chartComp",
  },
];
</script>
<style lang="scss" scoped>
.link-btn-box {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>
